<template>
  <div>
    <Menu mode="horizontal" theme="light" active-name="1">
      <li class="myli">
        <h2>教师督导</h2>
      </li>
      <MenuItem v-for="(item,index) in router" :to="'/teacherSupervisionHome/'+item.path" :key="index"
                :id="item.path" :name="index">
        <Icon :type="item.meta.icon"/>
        {{ item.meta.title }}
      </MenuItem>
      <li @click="loginout" class="myli2">
        <h4>退出登录</h4>
      </li>
      <li class="myli2">
        <h4>{{ user.name }}</h4>
      </li>
      <li class="myli3">
        <Avatar v-if="user.avatarUrl==null">{{ user.name.charAt(0) }}</Avatar>
        <Avatar v-else :src="user.avatarUrl"/>
      </li>
      <li class="myli2">
        <Poptip v-if="(AnnouncementList!=null && AnnouncementList.length > 0) || (taskMsg!=null && taskMsg.length > 0)"
                trigger="hover" width="250" placement="right-start" title="消息">
          <Badge class-name="Badge" :count="(AnnouncementList?AnnouncementList.length:0)+(taskMsg?taskMsg.length:0)">
            <Icon size="25" @click.native="modal.MyMsgFlag = true" type="md-notifications"/>
          </Badge>
          <div class="api mymaxdiv" slot="content">
            <List v-for="(item,index) in AnnouncementList" :key="index">
              <ListItem>
                <ListItemMeta :title="'公告【'+new Date(item.updateTime).toLocaleDateString()+'】'"
                              @click.native="openAnnouncement(item)" :description="item.title">
                  <template slot="avatar">
                    <Avatar v-if="item.userDO.avatarUrl==null" icon="ios-paper"/>
                    <Avatar v-else :src="item.userDO.avatarUrl"/>
                  </template>
                </ListItemMeta>
              </ListItem>
            </List>
            <List v-for="(item,index) in taskMsg" :key="index">
              <ListItem>
                <ListItemMeta :title="'任务【'+new Date(item.startTime).toLocaleDateString()+'】'"
                              @click.native="openAnnouncement(item)" :description="item.taskName">
                  <template slot="avatar">
                    <Avatar icon="ios-paper-plane"/>
                  </template>
                </ListItemMeta>
              </ListItem>
            </List>
          </div>
        </Poptip>
        <Icon v-else size="25" @click.native="modal.MyMsgFlag = true" type="md-notifications"/>
      </li>
      <li v-if="user.AuthorityList.includes('admin')" class="myli2">
        <router-link to="/home"><h4>返回后台</h4></router-link>
      </li>
    </Menu>
    <div class="mydiv2">
      <router-view/>
    </div>
    <open-msg :modal="modal"/>
    <my-msg :modal="modal"/>
  </div>
</template>
<script>
import openMsg from "@c/teacherSupervisionHome/openMsg";
import MyMsg from "@c/teacherSupervisionHome/MyMsg";

export default {
  components: {openMsg, MyMsg},
  data() {
    return {
      user: {},
      router: [],
      modal: {
        openMsgFlag: false,
        MyMsgFlag: false,
        objectMsg: {}
      }
    }
  },
  methods: {
    loginout() {
      let that = this
      this.http.auth("/loginout").then(res => {
        if (res.data) {
          this.$Modal.success({
            title: "提示",
            content: "成功退出",
            onOk() {
              that.$store.commit("setToken", "")
              window.location.reload();
            }
          })
        }
      })
    },
    /**
     * 打开消息或公告
     * @param val
     */
    openAnnouncement(val) {
      this.modal.openMsgFlag = true
      Object.assign(this.modal.objectMsg, val)
    },
  },
  created() {
    this.user = this.$store.state.user.user
    this.router = this.$router.options.routes.filter(f => f.name === "teacherSupervisionHome")[0].children
  },
  mounted() {
    document.getElementById("home").click()
  },
  computed: {
    AnnouncementList() {
      return this.MySocket.state.userMsg
    },
    taskMsg() {
      return this.MySocket.state.taskMsg
    }
  }, watch: {
    AnnouncementList(list) {
    }
  }
}
</script>

<style scoped>
.myli {
  height: inherit;
  line-height: inherit;
  border-bottom: 2px solid transparent;
  color: #515a6e;
  float: left;
  padding: 0 20px;
  position: relative;
  z-index: 3;
  transition: all .2s
}

.myli2 {
  float: right;
  margin-right: 30px;
  cursor: pointer;
}

.myli3 {
  float: right;
  margin-right: 10px;
  cursor: pointer;
}

.mydiv2 {
  padding: 19px;
}

.Badge {
  margin-top: 14px;
}
</style>
